<template>
  <div id="app" @mousewheel="onMousewheel">
    <div @click="takeImage">click</div>
    <div id="canvas" v-drag="rect" canmove="true"
      :style="{
        transform: `scale(${rect.scaleX},${rect.scaleY}) translate(${rect.left}px,${rect.top}px) rotate(${rect.rotate}deg)`,
        transformOrigin: `${rect.transformOriginX*100}% ${rect.transformOriginY*100}%`,
        width: `${rect.width}px`,
        height: `${rect.height}px`
      }">
      <div v-for="layer in layers" :key="layer.id" class="layer" :style="{
        width: `${rect.width}px`,
        height: `${rect.height}px`
      }">
        <template v-for="(element,i) in layer.elements" :key="i">
          <img v-drag="element.rect" canmove="true" @click="chooseElement(element,$event)" v-if="element.type==='img'" @load="onLoad(element,$event)" class="ele-img"
               :style="{
            zIndex:element.zIndex,
            transformOrigin: `${element.rect.transformOriginX*100}% ${element.rect.transformOriginY*100}%`,
            transform: `scale(${element.rect.width/element.naturalWidth},${element.rect.height/element.naturalHeight}) translate(${element.rect.left}px,${element.rect.top}px) rotate(${element.rect.rotate}deg)`,
          }" :src="element.src">
        </template>
      </div>
      <rect-border v-if="current.rect" :rect="current.rect"></rect-border>
    </div>
  </div>
</template>

<script>
import RectBorder from "@/RectBorder";
export default {
  name: 'App',
  components: { RectBorder },
  data() {
    return {
      draggable: false,
      startX: 0,
      startY: 0,
      originLeft: 0,
      originTop: 0,

      rect:{left:100,top:100,width:400,height:400,scaleX:1.0,scaleY:1.0,transformOriginX:0.5,transformOriginY:0.5,rotate:0},

      current:{
        layer:null,
        element:null,
        rect:null,
        dom:null
      },
      layers:[
        {id:1,name:'defaultLayer',elements:[
            {type:"img",rect:{left:0,top:0,width:0,height:0,scaleX:1.0,scaleY:1.0,transformOriginX:0.5,transformOriginY:0.5,rotate:0},naturalWidth:0,naturalHeight:0,src:'https://lgpark.iflysec.com/file/group1/M00/01/26/rB-7QmQyqAyAAdd3AA8uVjhCmMw309.png',zIndex:1},
            {type:"img",rect:{left:0,top:0,width:0,height:0,scaleX:1.0,scaleY:1.0,transformOriginX:0.5,transformOriginY:0.5,rotate:0},naturalWidth:0,naturalHeight:0,src:'https://doc.thinkphp.cn/lfs/55efb6ec3a68586bf4d3894849be6eeb456d80d29c1458984e636bb1d2e346dc.dat',zIndex:0},
          ],zIndex:0}
      ],
      actions:[]
    }
  },
  watch:{
    currentElement(val){
      console.log(val)
    }
  },
  methods: {
    takeImage(){
      const node = document.getElementById('canvas')
      // eslint-disable-next-line no-undef
      domtoimage.toPng(node)
          .then((dataUrl) => {
            var img = new Image();
            img.src = dataUrl;
            document.body.appendChild(img);
          })
          .catch((error) => {
            console.error('oops, something went wrong!', error);
          });
    },
    onLoad(element,$event){
      element.rect.width=$event.target.naturalWidth
      element.rect.height=$event.target.naturalHeight
      element.naturalWidth=element.rect.width
      element.naturalHeight=element.rect.height

      element.rect.width=100

      element.rect.scaleX=element.rect.width/$event.target.naturalWidth
      element.rect.scaleY=element.rect.height/$event.target.naturalHeight

    },
    chooseElement(element,$event){
      if(this.current.element===element){
        this.current.rect=null
        this.current.element=null
      }else{
        this.current.element=element
        this.current.dom=$event.target
        console.log()
        const r=$event.target.getBoundingClientRect()

        // this.current.rect=element.rect//{...$event.target.getBoundingClientRect(),rotate:0,scaleX:1.0,scaleY:1.0}
        // this.current.rect.left=r.left
        // this.current.rect.top=r.top
        // this.current.rect.width=r.width
        // this.current.rect.height=r.height
        // this.current.rect.scaleX=1.0
        // this.current.rect.scaleY=1.0


      }
    },
    onMousewheel(e){
      let delta=e.wheelDelta
      let originX=100.0*e.clientX/document.body.clientWidth
      let originY=100.0*e.clientY/document.body.clientHeight
      console.log(originX,originY)
      // this.transformOrigin=originX+'% '+originY+'%'
      console.log(this.transformOrigin)

      if(delta<0) {
        this.rect.scaleX=this.rect.scaleX * 0.9
        this.rect.scaleY=this.rect.scaleY * 0.9
      }else{
        this.rect.scaleX=this.rect.scaleX * 1.1
        this.rect.scaleY=this.rect.scaleY * 1.1
      }
      this.$nextTick(()=>{
        if(this.currentDom){
          // this.current.rect=this.currentDom.getBoundingClientRect()
        }
      })

      // setTimeout(() => {
      //   this.$nextTick(()=>{
      //     if(delta<0) {
      //       this.scale=this.scale * 0.9
      //     }else{
      //       this.scale=this.scale * 1.1
      //     }
      //     if(this.currentDom){
      //       this.currentRect=this.currentDom.getBoundingClientRect()
      //     }
      //   })
      // }, 10);
    }
  }
}
</script>

<style>
body, html{
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#app, #canvas{
  width: 100%;
  height: 100%;
  position: relative;
  background: gray;
}
#canvas {
  width: 0;
  height: 0;
  overflow: hidden;
  background: #ddd;
}
.layer{
  left: 0;
  top: 0;
  position: absolute;
  overflow: hidden;
}
.ele-wrapper{

}
.ele-img{
  display:block;cursor:pointer;position:absolute;left:0;top:0;
}
.rect{
  position: absolute;
  border: 1px solid red;
}
</style>
